import React, { useState } from 'react';
import { Card, Form, InputNumber, Button, message, DatePicker } from 'antd';
import { calculatePartyFees } from '@/api/partyFee';
import type { PartyFeeCalculationDTO } from '@/api/partyFee';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';

const PartyFeeCalculation: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (values: any) => {
    try {
      setLoading(true);
      const data: PartyFeeCalculationDTO = {
        year: values.year.year(),
        month: values.month ? values.month.month() + 1 : undefined,
      };
      await calculatePartyFees(data);
      message.success('党费计算成功');
      navigate('/party-fee/result');
    } catch (error) {
      // 错误已在request.ts中处理
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card title="党费计算">
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        style={{ maxWidth: 400 }}
      >
        <Form.Item
          name="year"
          label="计算年份"
          rules={[{ required: true, message: '请选择计算年份' }]}
        >
          <DatePicker
            picker="year"
            style={{ width: '100%' }}
            placeholder="请选择计算年份"
          />
        </Form.Item>

        <Form.Item
          name="month"
          label="计算月份（可选）"
          tooltip="不选择月份则计算全年党费"
        >
          <DatePicker
            picker="month"
            style={{ width: '100%' }}
            placeholder="请选择计算月份（可选）"
          />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            开始计算
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={() => navigate('/party-fee/result')}>
            查看结果
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default PartyFeeCalculation; 